<template>
  <div class="time">
    <h3>{{data1}}</h3>
    <h3>{{data2}}</h3>
    <h3>{{end}}</h3>
    <h3>day:{{end | day}} 天</h3>
    <h3>day:{{end | daytime}} 小时</h3>
    <h3>day:{{end | house}} 分</h3>
    <h3>day:{{end | sen}} 秒</h3>
    {{num}}
    <span v-if="judeg">倒计时</span>
    <span v-else>热卖中</span>
  </div>
</template>

<script>
function data(date) {
  let time = new Date(date)
  return time.getTime()
}
let daytime = 24 * 3600 * 1000
let day = 3600 * 1000
let min = 60 * 1000
export default {
  data() {
    return {
      data1: data(new Date()),
      data2: data("2021-6-1 09:57:10"),
      time: null,
      num: 0,
      judeg: true
    }
  },
  computed: {
    end: function () {
      return this.data1 - this.data2 < 0 ? this.data2 - this.data1 : 0
    }
  },
  // watch: {
  //   end: function (val) {
  //     if (val === 0) {
  //       clearInterval(this.time)
  //     }
  //   }
  // },
  filters: {
    daytime: function (time) { // 小时
      return Math.floor(time / day)
    },
    house: function (time) { // 分
      return Math.floor(time % day / min)
    },
    sen: function (time) { // 秒
      return Math.floor(time % day % min / 1000)
    },
    day: function (time) { // 天
      return Math.floor(time / daytime)
    }

  },
  mounted() {
    this.time = setInterval(()=>{
      this.data1 = data(new Date())
      if (this.data2 - this.data1 <= 0) {
        clearInterval(this.time)
        this.judeg = false
      }
      // this.data1 = data(new Date())
      // if (this.data1 === this.data2) {
      //   clearInterval(this.time)
      // }
    },1000)
  },
  destroyed() {
    clearInterval(this.time)
  }
}
</script>

<style>

</style>